<template>
    <view class="pub_page pub_page_bg pub_header_padding pub_find_psd">
        <pub-head headerName="login" :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box">
            <br>
            <br>
            <div class="input_box">
                <pub-image class="title"
                    :src="openType == 1 ? '../../static/bimg/img_9.png' : '../../static/bimg/img_12.png'" mode="widthFix" />
                <br>
                <div class="input_div_new">
                    <div class="li">
                        <div class="txt pub_font">手机号码</div>
                        <div class="li_box">
                            <input class="input pub_font" v-model="mobile" type="number" placeholder="请输入" maxlength="11"
                                :disabled="openType == 2 ? true : false">
                            <div class="input_right_btn pub_font" v-if="mobile.length == 11" @click="toSendCode">{{ code_msg
                            }}</div>
                        </div>
                    </div>
                    <div class="li">
                        <div class="txt pub_font">验证码</div>
                        <div class="li_box">
                            <input class="input pub_font" v-model="code" type="number" placeholder="请输入" maxlength="6">
                        </div>
                    </div>
                    <div class="li">
                        <div class="txt pub_font">新密码</div>
                        <div class="li_box">
                            <input class="input pub_font" v-model="password" type="password" placeholder="请输入">
                        </div>
                    </div>
                    <div class="li">
                        <div class="txt pub_font">确认新密码</div>
                        <div class="li_box">
                            <input class="input pub_font" v-model="repeatPassword" type="password" placeholder="请输入">
                        </div>
                    </div>
                </div>
                <br>
                <br>
                <div class="pub_btn_psd" @click="toReset"></div>
            </div>
            <br>
            <br>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pagescrollTop: 0,
            headerConfig: {
                title: '',//标题栏内容
                left_type: 3,
                header_color: 'rgba(0,0,0,0)',//标题栏背景色
            },

            openType: 0,//1忘记密码  2修改密码

            code: '',
            code_msg: '请输入手机号',
            mobile: '',
            password: '',
            repeatPassword: ''
        };
    },
    onLoad(option) {
        this.openType = option.openType || 1;
        // this.headerConfig.title = this.openType == 1 ? '忘记密码' : '修改密码';
        if (this.openType == 2) {
            this.mobile = option.mobile || '';
        }
    },
    onPageScroll(res) {
        this.pagescrollTop = res.scrollTop;
    },
    watch: {
        mobile() {
            if (this.code_msg.indexOf('剩') == -1) {
                if (this.mobile.length == 11 && this.$comFun.ValidateMobile(this.mobile)) {
                    this.code_msg = '发送验证码';
                } else {
                    this.code_msg = '请输入手机号';
                }
            }
        }
    },
    methods: {
        async toReset() {
            if (!this.$comFun.ValidateMobile(this.mobile)) {
                this.$comFun.toast('请输入正确的手机号');
                return;
            }
            if (this.code.length != 6) {
                this.$comFun.toast('请输入6位验证码');
                return;
            }
            if (this.password.length < 8 || !this.$comFun.ValidateNumAndLetter(this.password)) {
                this.$comFun.toast('请输入至少8位登录密码，必须包括数字和字母');
                return;
            }
            if (this.password != this.repeatPassword) {
                this.$comFun.toast('两次密码不同');
                return;
            }
            this.$comFun.openLoading();
            const res = await this.$request.post('user/forgetResetPassword', {
                mobile: this.mobile,
                code: this.code,
                password: this.password,
                repeatPassword: this.repeatPassword,
            });
            // console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                if (this.openType == 1) {
                    this.$comFun.toast('修改成功');
                    setTimeout(() => {
                        this.$comFun.closeWin();
                    }, 1000);
                } else {
                    this.$comFun.toast('修改成功，已退出登陆');
                    this.$comFun.clearUserInfo();
                }
            } else {
                this.$comFun.toast(res.message);
            }
        },
        async toSendCode() {
            if (this.mobile.length != 11) {
                // this.$comFun.toast('请输入正确的手机号');
                return;
            }
            if (this.code_msg == '发送验证码') {
                this.$comFun.openLoading();
                const res = await this.$request.get('public/sendSms', {
                    mobile: this.mobile
                });
                // console.log(res);
                this.$comFun.closeLoading();
                if (res.code == 200) {
                    this.codeTime();
                } else {
                    this.$comFun.toast(res.message);
                }
            }
        },
        codeTime() {
            this.code_msg = '剩 60 s';
            let count = 60;
            let time = setInterval(() => {
                if (count == 1) {
                    clearInterval(time);
                    if (this.$comFun.ValidateMobile(this.mobile)) {
                        this.code_msg = '发送验证码';
                    } else {
                        this.code_msg = '请输入手机号';
                    }
                    return;
                }
                count--;
                this.code_msg = '剩 ' + count + ' s';
            }, 1000);
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/login.scss";
</style>
